<#--洪磊 2018/05/23 11:23-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>考试进行进行中...</title>


    <link rel="stylesheet" href="/frame/layui/css/layui.css">
    <link rel="stylesheet" href="/css/bootstrap.min.css">

    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap/bootstrap.min.js"></script>
    <script type="text/javascript" src="/js/vue/vue.min.js"></script>
    <script src="/frame/layui/layui.all.js"></script>
    <script src="/frame/layui/layui.js"></script>


    <style type="text/css">

        .text_main{
            width: 1200px;
            height: 100%;
            margin-top: 20px;
            margin-right: auto;
            margin-bottom: 0px;
            margin-left: auto;

        }
        .left{
            float: left;
            width: 900px;
            height: 100%;
            padding: 18px;
            background-color: white;
        }
        .right{
            float: right;
            width: 280px;
            margin-left: 20px;
        }
        .notmove{
            position: fixed;
            z-index:2008;
            top:20px;
            width:270px;
            height: 100%;
        }
        .assist{
            padding: 10px;
            background-color: white;
            height: 100%;
        }
        li{
            list-style: none;
        }
        .card_ul>li{
            float: left;
            width: 20px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            margin:1px;
            border: 1px solid blue;
            border-radius: 4px;
        }

        /*清除浮动*/
        .clearfix:after {
            content: "";
            display:block;
            height:0;
            clear:both;
            visibility:hidden;
        }
        .paper_main{
            font-size: 16px;
        }
        .one_li{
            margin: 10px 0;
        }
        label{
            font-weight: 300;
        }
        .option{
            margin-left: 10px;
            border: 1px solid #EDF0F7;
            background-color: #F9FDFF;
            width: 97%;
            height: 45px;
            line-height: 45px;
        }

        /*input样式*/
        input[type="radio"],input[type="checkbox"]{
            -webkit-appearance: none;
            outline: none;
        }
        input[type="radio"]{
            position: relative;
            width: 26px;
            height: 26px;
            border: 2px solid #00A1E9;
            border-radius: 100%;
            -webkit-border-radius: 100%;
            -moz-border-radius:100%;
            vertical-align: middle;
            background: white;
            margin-bottom: 5px;
        }

        input[type="radio"]:checked:after {
            content: '';
            position: absolute;
            left: 5px;
            top: 5px;
            width: 12px;
            height: 12px;
            background-color:#00A1E9;
            border-radius: 100%;
            -webkit-border-radius: 100%;
            -moz-border-radius:100%;
        }
        input[type="radio"]:checked {
            background-color: #fff;
        }
        input[type="checkbox"] {
            position: relative;
            width: 26px;
            height: 26px;
            border: 2px solid #186D9A;
            border-radius: 100%;
            vertical-align: middle;
            background: white;
            margin-top: 0;
        }
        input[type="checkbox"]:checked:after {
            content: '';
            position: absolute;
            left: 4px;
            top: 4px;
            width: 14px;
            height:14px;
            border-left: 2px solid #186D9A;
            border-bottom: 2px solid #186D9A;
            transform: rotate(-45deg);
        }
        input[type="checkbox"]:checked {
            background-color: #fff;
        }


    </style>
</head>
<body class="bg-success">
<div class="main"  id="aop">
    <div class="text_main">
        <div class="left">

            <h3 v-html="paper.paper_name" style="text-align: center">{{paper.paper_name}}</h3>
            <h4 style="text-align: right">时间  <span id="dura" style="font-style: italic;font-weight: 200">{{paper.dura}}分钟</span>&nbsp;&nbsp; 满分 <span style="font-style: italic;font-weight: 200">{{paper.full}}分</span></h4>
            <hr/>
            <div class="paper_main">

                <div class="panel panel-info plm_only" v-show="onlyList.length != 0">
                    <div class="panel-heading">
                        <h4>单选题（共{{onlyList.length}}道题，每题{{types.only}}分）</h4>
                    </div>
                    <div style="margin:15px 0 0 15px;">
                        <ul>
                            <li v-for="(pro,index) in onlyList" class="one_li">
                                <div :id="'plm_only_'+(index+1)" style="margin-bottom: 15px">
                                    <span>{{index+1}}.</span>
                                    <span>{{pro.pname}}</span>
                                </div>
                                <div style="margin-left: 20px">
                                    <ul>
                                    <#--选项-->
                                        <li v-for="(value,key) in pro.pchoice" v-if="value != null" style="height: 30px">
                                            {{key}}.
                                            <span v-html="value"></span>
                                        </li>
                                    </ul>
                                </div>
                                <div class="row option">
                                    <div class="col-sm-10">
                                        <template v-for="(value,key) in pro.pchoice" v-if="value != null">
                                            <label :for="'plm_only_'+(index+1)+key" style="margin-left: 8px;font-size: 19px">
                                                <input type="radio" :title="value" :name="'plm_only_'+(index+1)" :id="'plm_only_'+(index+1)+key" @click="getOnlyAnswer(index,key)"/>
                                                {{key}}
                                            </label>
                                        </template>
                                    </div>
                                    <div class="col-sm-2">
                                        <span><i class="layui-icon">&#xe60c;</i> 收藏试题</span>
                                    </div>
                                </div>
                            </li>

                        </ul>
                    </div>
                </div>

                <div class="panel panel-success plm_many" v-show="manyList.length != 0">
                    <div class="panel-heading">
                        <h4>多选题（共{{manyList.length}}道题，每题选对{{types.many.a}}分<span v-if="types.many.b != ''">，少选{{types.many.b}}分</span>）</h4>
                    </div>
                    <div style="margin:15px 0 0 15px;">
                        <ul>

                            <li v-for="(pro,index) in manyList" class="one_li">
                                <div :id="'plm_many_'+(index+1)" style="margin-bottom: 15px">
                                    <span>{{index+1}}.</span>
                                    <span>{{pro.pname}}</span>
                                </div>
                                <div style="margin-left: 20px">
                                    <ul>
                                        <li v-for="(value,key) in pro.pchoice" v-if="value != null" style="height: 30px">
                                            {{key}}.
                                            <span v-html="value"></span>
                                        </li>
                                    </ul>
                                </div>
                                <div class="row option" style="margin-left: 10px;border: 1px solid #EDF0F7;background-color: #F9FDFF;width: 97%;">
                                    <div class="col-sm-10">
                                        <template v-for="(value,key) in pro.pchoice" v-if="value != null">

                                            <label :for="'plm_many_'+(index+1)+key" style="margin-left: 8px;font-size: 19px">
                                                <input type="checkbox" :name="'plm_many_'+(index+1)" :id="'plm_many_'+(index+1)+key" :value="key" v-model="pro.studentAnswer"/>
                                                {{key}}
                                            </label>
                                        </template>
                                    </div>
                                    <div class="col-sm-2">
                                        <span><i class="layui-icon">&#xe60c;</i> 收藏试题</span>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="panel panel-info plm_judge" v-show="judgeList.length != 0">
                    <div class="panel-heading">
                        <h4>判断题（共{{judgeList.length}}道题，每题{{types.judge}}分）</h4>
                    </div>
                    <div style="margin:15px 0 0 15px;">
                        <ul>
                            <li v-for="(pro,index) in judgeList" class="one_li">
                                <div :id="'plm_judge_'+(index+1)" style="margin-bottom: 15px">
                                    <span>{{index+1}}.</span>
                                    <span>{{pro.pname}}</span>
                                </div>
                                <div>
                                    <ul>
                                        <li>
                                            <img src="/img/31dfc923-ba9d-47f1-a8fb-1e3b84682279搜索效果.png" width="100px" height="100px"><br>
                                        </li>
                                    </ul>
                                </div>
                                <div class="row option" style="margin-left: 10px;border: 1px solid #EDF0F7;background-color: #F9FDFF;width: 97%;">
                                    <div class="col-sm-10">
                                        <template v-for="(value,key) in pro.pchoice" v-if="value != null">
                                            <label :for="'plm_judge_'+(index+1)+key" style="margin-left: 8px;font-size: 19px">
                                                <input type="radio" :name="'plm_judge_'+(index+1)" :id="'plm_judge_'+(index+1)+key" @click="getJudgeAnswer(index,key)"/>
                                                {{key}}
                                            </label>
                                        </template>
                                    </div>
                                    <div class="col-sm-2">
                                        <span><i class="layui-icon">&#xe60c;</i> 收藏试题</span>
                                    </div>
                                </div>
                            </li>

                        </ul>
                    </div>
                </div>

            </div>
        </div>

        <div class="right">
            <div class="notmove">
                <div class="assist">
                    <h3>考试倒计时 <span id="time">00:00:00</span></h3>

                    <button class="btn btn-success col-sm-11" onclick="getScore()">提交试卷</button>
                    <br/>
                    <h3>答题卡</h3>
                    <div class="card">

                    <#--选择题-->
                        <div id="onlyCard" v-show="onlyList.length != 0">
                            <h5>单选题</h5>
                            <div class="clearfix">
                                <ul class="card_ul">
                                    <li :id="'#card_only_'+(index+1)" v-for="(pro,index) in onlyList">
                                        <a :href="'#plm_only_'+(index+1)">{{index+1}}</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    <#--多选题-->
                        <div class="manyCard" v-show="manyList.length != 0">
                            <h5>多选题</h5>
                            <div class="clearfix">
                                <ul class="card_ul">
                                    <li :id="'#card_many_'+(index+1)" v-for="(pro,index) in manyList">
                                        <a :href="'#plm_many_'+(index+1)">{{index+1}}</a>
                                    </li>
                                </ul>
                            </div>
                        </div>

                    <#--判断题-->
                        <div class="judgeCard" v-show="judgeList.length != 0">
                            <h5>判断题</h5>
                            <div class="clearfix">
                                <ul class="card_ul">
                                    <li :id="'#card_judge_'+(index+1)" v-for="(pro,index) in judgeList">
                                        <a :href="'#plm_judge_'+(index+1)">{{index+1}}</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
<input type="hidden" value="${id}" id="paperid">
</body>
<script type="text/javascript">


</script>
<script type="text/javascript" src="/js/student/exam.js"></script>


</html>